<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="BackPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<view @tap="RightEvent" class="cuIcon-friendfamous">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modelIsShow">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view :class="'text-'+ColorList[Math.random() * ColorList.length | 0].name" class="content">餐食添加</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">餐型</view>
							<radio-group class="block" @change="typeChange">
								<text :class="'text-'+ColorList[Math.random() * ColorList.length | 0].name" class="fl text-lg  margin-left-xl margin-right-xs">上午</text>
								<radio class="fl radio red" :class="foot.type=='mid'?'checked':''" :checked="foot.type=='mid'?true:false" value="mid"></radio>
								
								<radio class="fr radio blue margin-right-xl margin-left-xs" :class="foot.type=='lat'?'checked':''" :checked="foot.type=='lat'?true:false" value="lat"></radio>
								<text :class="'text-'+ColorList[Math.random() * ColorList.length | 0].name" class="fr text-lg ">下午</text>
							</radio-group>
						</view>
						<view class="cu-form-group">
							<view class="title">餐类</view>
							<radio-group class="block" @change="nutritionTypeChange">
								<text :class="'text-'+ColorList[Math.random() * ColorList.length | 0].name" class="fl text-lg  margin-left-xl margin-right-xs">肉食</text>
								<radio class="fl radio red" :class="foot.nutritionType=='meat'?'checked':''" :checked="foot.nutritionType=='meat'?true:false" value="meat"></radio>
								
								<radio class="fr radio blue margin-right-xl margin-left-xs" :class="foot.nutritionType=='plain'?'checked':''" :checked="foot.nutritionType=='plain'?true:false" value="plain"></radio>
								<text :class="'text-'+ColorList[Math.random() * ColorList.length | 0].name" class="fr text-lg ">素食</text>
							</radio-group>
						</view>
						<view class="cu-form-group">
							<view class="title">日期</view>
							<picker  @change="weekChange" :value="foot.week.i" :range="week" range-key="value">
								<view :class="'text-'+ColorList[Math.random() * ColorList.length | 0].name" class="picker">
									{{foot.week.i>-1?week[foot.week.i].value:'请选择用餐日期'}}
								</view>
							</picker>
						</view>
						<view class="cu-form-group align-start">
							<view class="title">餐名</view>
							<textarea v-model="foot.name" maxlength="-1"  placeholder="一次性添加多个餐食,请自行换行"></textarea>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="footAdd">添加</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as footUtils from '../../js/foot.js';
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				modelIsShow: "",
				week: [
					{
						i:0,
						value:"星期日",
					},
					{
						i:1,
						value:"星期一",
					},
					{
						i:2,
						value:"星期二",
					},
					{
						i:3,
						value:"星期三",
					},
					{
						i:4,
						value:"星期四",
					},
					{
						i:5,
						value:"星期五",
					},
					{
						i:6,
						value:"星期六",
					},
			],
				foot:{
					week:{i:0,value:"星期日"},
					type:"mid",
					nutritionType:"meat",
				},
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			RightEvent() {
				this.$data.modelIsShow = "show";
			},
			hideModal(e) {
				this.$data.modelIsShow = "";
			},
			footAdd() {
				console.log(this.$data.foot);
				footUtils.uploadFoot(this.$data.foot);
				this.$parent.getFoot();
				this.hideModal();
			},
			typeChange(e) {
				this.$data.foot.type = e.detail.value
			},
			nutritionTypeChange(e) {
				this.$data.foot.nutritionType = e.detail.value
			},
			weekChange(e){
				this.$data.foot.week = this.$data.week[e.detail.value];
			},
		}
	}
</script>

<style>
	
</style>
